<template>
  <div class="profile-container">
    <div class="operation">
      <el-form size="medium" :inline="true" v-model="conditions">
        <el-form-item label="ID">
          <el-input placeholder="请输入ID" v-model="conditions.id"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="conditions.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="conditions.nickname" placeholder="请输入昵称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="pageByCond()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table">
      <el-card class="box-card">
        <el-table :data="tableData" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="id" label="ID" width="220"> </el-table-column>
          <el-table-column prop="username" label="用户名" width="150">
          </el-table-column>
          <el-table-column prop="nickname" label="昵称" width="150">
          </el-table-column>

          <el-table-column prop="phone" label="手机" width="150">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="220">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" style="margin-right: 10px" @click="handleEdit(scope.row)">编辑</el-button>

              <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row)">
                <el-button size="mini" type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="pagination">
      <el-pagination background layout="sizes,total, prev, pager, next,jumper" :current-page="pagination.currentPage"
        :page-sizes="[5]" :page-size="this.pagination.pageSize" :total="pagination.total"
        @current-change="handleCurrentChange" @size-change="handleSizeChange">
      </el-pagination>
    </div>

    <div class="dialog">
      <el-dialog title="编辑信息" :visible.sync="dialog.visible" width="30%">
        <el-card shadow="never">
          <div class="item">
            <div class="title">
              <div class="div">用</div>
              <div class="div">户</div>
              <div class="div">名</div>
            </div>
            <div class="value">
              <el-input style="width: 200px" v-model="dialog.data.username"></el-input>
            </div>
          </div>

          <div class="item">
            <div class="title">
              <div class="div">用</div>
              <div class="div">户</div>
              <div class="div">昵</div>
              <div class="div">称</div>
            </div>
            <div class="value">
              <el-input style="width: 200px" v-model="dialog.data.nickname"></el-input>
            </div>
          </div>
          <div class="item">
            <div class="title">
              <div class="div">手</div>
              <div class="div">机</div>
              <div class="div">号</div>
            </div>
            <div class="value">
              <el-input style="width: 200px" v-model="dialog.data.phone"></el-input>
            </div>
          </div>
          <div class="item">
            <div class="title">
              <div class="div">地</div>
              <div class="div">址</div>
            </div>
            <div class="value">
              <el-input style="width: 200px" v-model="dialog.data.address"></el-input>
            </div>
          </div>
        </el-card>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.visible = false">取 消</el-button>
          <el-button type="primary" @click="save()">保 存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      tableData: [],
      conditions: {
        id: '',
        username: '',
        nickname: '',
      },

      pagination: {
        pageSize: 5,
        currentPage: 1,
        total: 0,
      },
      dialog: {
        data: {
          username: '',
          nickname: '',
          phone: '',
          address: '',
        },

        visible: false,
      },
      handleDelete(row) {
        this.$api.user.remove(row.id).then((res) => {
          if ((res.code = 200)) {
            this.$message.success({
              type: 'success',
              message: '删除成功',
            })
            this.pageByCond()
          }
        })
      },
      handleEdit(row) {
        this.dialog.visible = true
        this.dialog.data.id = row.id
        this.dialog.data.username = row.username
        this.dialog.data.nickname = row.nickname
        this.dialog.data.phone = row.phone
        this.dialog.data.address = row.address
      },
      save() {
        this.$api.user.updateById(this.dialog.data).then((res) => {
          if ((res.code = 200)) {
            this.$message.success({
              type: 'success',
              message: '修改成功',
            })
            this.pageByCond()
            this.dialog.visible = false
          }
        })
      },
    }
  },
  created() {
    this.pageByCond()
  },
  methods: {
    pageByCond() {
      this.$api.user
        .pageByCond(
          this.pagination.currentPage,
          this.pagination.pageSize,
          this.conditions
        )
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.records
            this.pagination.total = res.data.total
          }
        })
    },

    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.pageByCond()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pageByCond()
    },
  },
}
</script>

<style lang="scss" scoped>
.profile-container {
  .operation {
    .el-form {
      .el-form-item {
        margin: 0 20px 0 0;

        &:first-child {
          margin-left: 30px;
        }
      }
    }
  }

  .table {
    margin: 20px 0;

    .el-card {
      height: 375px;
    }
  }

  .dialog {
    .el-card {
      background-color: white;
      border: 0;
      border-radius: 0;
      margin-bottom: 10px;
    }

    .item {
      position: relative;
      height: 40px;
      display: flex;
      margin-bottom: 10px;

      &:last-child {
        margin: 0;
      }

      .title {
        display: flex;
        width: 64px;
        justify-content: space-between;
        margin-right: 40px;
        align-items: center;
      }

      .value {
        line-height: 40px;

        .el-tag {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>